<template>
    <div>
        <el-dialog :title="form.title" :visible.sync="dialogFormVisible">
        <el-form :model="forms" ref="forms">
            <el-form-item
            :label="forms[0].title" 
            :label-width="formLabelWidth">
                <div class="logo" @click="imgFun">
                    <i class="el-icon-plus"></i>
                    <img @mousemove="moveFun" :src="forms[0].value" alt="" style="width:50px;height:50px;">
                    <!-- <div class="imgss" v-show="show"></div> -->
                </div>
            </el-form-item>

            <!-- uid -->
            <el-form-item
            :label="forms[1].field" 
            :label-width="formLabelWidth"
            hidden
            >
               <el-input
                    size="small"
                    v-model="forms[1].value"
                    clearable>
                </el-input>
            </el-form-item>

            <!-- avater -->
            <el-form-item
            :label="forms[2].field" 
            :label-width="formLabelWidth"
            hidden
            >
               <el-input
                    size="small"
                    v-model="forms[2].value"
                    clearable>
                </el-input>
            </el-form-item>


            <el-form-item
            :prop="forms[3].value"
            :label="forms[3].title" 
            :label-width="formLabelWidth"
            >
                <el-select size="small" clearable v-model="forms[3].value" :placeholder="forms[3].props.placeholder">
                    <el-option
                    v-for="item in forms[3].options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item
            :prop="forms[4].value"
            :label="forms[4].title" 
            :label-width="formLabelWidth"
            >
               <el-input
                    size="small"
                    :placeholder="forms[4].props.placeholder"
                    v-model="forms[4].value"
                    clearable>
                </el-input>
            </el-form-item>

            <el-form-item
            :prop="forms[5].value"
            :label="forms[5].title" 
            :label-width="formLabelWidth"
            >
               <el-input
                    size="small"
                    :placeholder="forms[5].props.placeholder"
                    v-model="forms[5].value"
                    clearable>
                </el-input>
            </el-form-item>

            <el-form-item
            :prop="forms[6].value"
            :label="forms[6].title" 
            :label-width="formLabelWidth"
            >
               <el-radio v-model="forms[6].value" v-for="(v,i) in forms[6].options" :key="i" :label="v.value">{{v.label}}</el-radio>
            </el-form-item>

            <el-form-item
            :prop="forms[7].value"
            :label="forms[7].title" 
            :label-width="formLabelWidth"
            >
                <el-radio v-model="forms[7].value" v-for="(v,i) in forms[7].options" :key="i" :label="v.value">{{v.label}}</el-radio>
            </el-form-item>
            
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button style="width:100%;" type="primary" @click=" form.title == '添加核销员' ? submitForm('forms') : editFun('forms') ">提 交</el-button>
        </div>
        </el-dialog>

        <!-- 头像选择 -->
        <Total :isShow='isShow' @imgVal='imgVal'></Total>
    </div>
</template>

<script>
import Total from './total.vue';
import {verifieradd,verifieredits,verifiereditss} from '../../api/pickuper/verifier'
export default {
    props:['form','forms','dialogFormVisible'],
    components:{
        Total
    },
    data(){
        return {
            formLabelWidth:'100px',
            isShow:{
                dialogTableVisible:false
            },
            show:false,
            uid:0
        }
    },
    created(){
        
    },
    methods:{
        //移动
        moveFun(){
            this.show = !this.show;
        },
        //图片返回
        imgVal(val){
            console.log(val);
            this.isShow.dialogTableVisible = val.show;
            this.forms[0].value = val.imgs;
            this.uid = val.id
        },
        //编辑表单
        editFun(formName){
            this.$refs[formName].validate((valid) => {
            if (valid) {
                
                verifiereditss({
                    id:this.form.id,
                    avatar:this.forms[0].value,
                    image:this.forms[0].value,
                    phone:this.forms[5].value,
                    staff_name:this.forms[4].value,
                    status:this.forms[6].value,
                    store_id:this.forms[3].value,
                    uid:this.forms[1].value,
                    verify_status:this.forms[7].value,
                }).then(res => {
                    if (res.data.status == 200){
                        this.$message.success(res.data.msg)
                        this.dialogFormVisible = false
                        this.$emit('addVal',this.dialogFormVisible)
                    }else{
                        this.$message.error(res.data.msg)
                    }
                },err => {
                    console.log(err);
                })
            } else {
                console.log('error submit!!');
                return false;
            }
            });
        },
        //提交表单
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
            if (valid) {
                console.log(this.forms);
                
                verifieradd({
                    avatar:this.forms[2].value,
                    image:{
                        image:this.forms[0].value,
                        uid:this.uid
                    },
                    phone:this.forms[5].value,
                    staff_name:this.forms[4].value,
                    status:this.forms[6].value,
                    store_id:this.forms[3].value,
                    uid:this.forms[1].value,
                    verify_status:this.forms[7].value,
                }).then(res => {
                    if (res.data.status == 200){
                        this.$message.success('添加成功！')
                        this.dialogFormVisible = false
                        this.$emit('addVal',this.dialogFormVisible)
                    }else{
                        this.$message.error('添加失败！')
                    }
                },err => {
                    console.log(err);
                })
            } else {
                console.log('error submit!!');
                return false;
            }
            });
        },
        imgFun(){
            this.isShow.dialogTableVisible = true;
        }
    }
}
</script>

<style lang="scss">
    .logo{
        width: 50px;
        height: 50px;
        border: 1px dashed #ccc;
        border-radius: 4px;
        background: white;
        position: relative;
        box-shadow: 2px 2px 4px #ccc;
        .el-icon-plus{
            position: absolute;
            top: 18px;
            left: 18px;
        }
        img{
            position: absolute;
            z-index: 1;
        }
        .imgss{
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0px;
            left: 0px;
            background: rgba($color: #000000, $alpha: .4);
            border-radius: 4px;
        }
    }
</style>